<template>
  <div class="app">
    <!-- 顶部标题图片 -->
    <div class="img_top">
      <img class="title_img" src="../assets/img/logo.png" />
      <div class="title">{{ title }}</div>
    </div>
    <!-- 轮播开始 -->
    <div class="carousels">
      <Carousels ref="carousels" :carouselList="images"></Carousels>
    </div>
    <!-- 轮播结束 -->
    <!-- <div class="mp4">
      <Mp4 ref="mp4"></Mp4>
    </div> -->
    <div class="btn-fullscreen" @click="handleFullScreen">
      <el-tooltip
        class="item"
        effect="dark"
        :content="fullscreen ? '退出全屏' : '全屏'"
        placement="bottom"
      >
        <i
          :class="fullscreen ? 'el-icon-aim' : 'el-icon-full-screen'"
          style="width: 1.2rem;height: 1.2rem;vertical-align:middle;margin-right:.6rem;margin-bottom:.5rem;font-size:2rem;color:white;"
        ></i>
      </el-tooltip>
    </div>

    <div class="btn-vedio" @click="handleVedio">
      <el-select
        v-model="value"
        placeholder="—视频资料—"
        popper-class="vedio-select"
        class="vedio-select"
        size="mini"
        :clearable="true"
        @change="handleVedio"
      >
        <el-option
          v-for="item in vedioOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <div class="change-btn" @click="handleChange">
      <el-tooltip
        class="item"
        effect="dark"
        :content="showType ? '实景图' : '地图'"
        placement="bottom"
      >
        <i
          :class="showType ? 'el-icon-picture-outline' : 'el-icon-map-location'"
          style="width: 1.2rem;height: 1.2rem;vertical-align:middle;margin-right:.6rem;margin-bottom:.5rem;font-size:2rem;color:white;"
        ></i>
      </el-tooltip>
    </div>
    <!-- 地图搜索开始 -->
    <div v-if="showType" class="right-panel">
      <div class="search-panel">
        <el-select
          v-model="keyWords"
          class="search-input"
          size="mini"
          popper-class="map-search-select"
          placeholder="摄像头点位"
          reserve-keyword
          clearable
          @change="selectRoad"
        >
          <el-option
            v-for="(item, index) in cameras"
            :key="item.id"
            :label="item.title"
            :value="index"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 地图搜索结束 -->

    <!--  宣传视频 -->
    <!-- 添加或修改测试单表对话框 -->
    <el-dialog
      :visible.sync="open"
      width="60%"
      append-to-body
      class="vedio-dialog"
      :show-close="false"
      :destroy-on-close="true"
      @close="closeVedioDialog"
    >
      <Mp4 :vedioUrl="this.vedioUrl" :poster="this.posterUrl"></Mp4>
    </el-dialog>
  </div>
</template>

<script>
import Carousels from "@/components/Carousel";
import Mp4 from "@/components/Mp4";
//var socket = null;

export default {
  name: "App",
  components: {
    Carousels,
    Mp4,
  },
  data() {
    return {
      options: [118.917077, 31.836182],
      loading: false,
      keyWords: "", // 地图搜索关键字
      vedioOptions: [
        {
          value: "0",
          label: "宣传视频1",
        },
        {
          value: "1",
          label: "宣传视频2",
        },
      ],
      vedioUrl: "",
      posterUrl: "",
      value: "",
      open: false,
      cameras: [
        {
          id: 312,
          y: 31.836952,
          x: 118.923003,
          title: "摄像头-1",
          content: "F11111111",
          url: "ezopen://TXHHAF@open.ys7.com/F11111111/1.live",
          type: 0, //0-normal,1-warn
        },
        {
          id: 421,
          y: 31.817779,
          x: 118.90613,
          title: "摄像头-2",
          content: "F11111111",
          url: "ezopen://DVOXYY@open.ys7.com/F11111111/1.live",
          type: 0, //0-normal,1-warn
        },
        {
          id: 422,
          y: 31.82017,
          x: 118.915225,
          title: "摄像头-3",
          content: "F11111111",
          url: "ezopen://PVAJKR@open.ys7.com/F11111111/1.live",
          type: 0, //0-normal,1-warn
        },
        {
          id: 423,
          y: 31.836472,
          x: 118.919413,
          title: "摄像头-4",
          content: "F11111111",
          url: "ezopen://HVPJQH@open.ys7.com/F11111111/1.live",
          type: 0, //0-normal,1-warn
        },
        {
          id: 424,
          y: 31.82097,
          x: 118.915685,
          title: "摄像头-5",
          content: "F11111111",
          url: "ezopen://IWADIZ@open.ys7.com/F11111111/1.live",
          type: 0, //0-normal,1-warn
        },
      ],
      showType: false,
      fullscreen: false,
      dialogVisible: true,
      coordinateDialogVisible: false,
      title: "美丽乡村大屏展示",
      images: [
        {
          id: 1,
          url: require("../assets/img/1.jpg"),
          xnsqtitle: "标题：新农社区",
          xnsqcnt: "党建引领，乡村振兴。",
        },
        {
          id: 2,
          url: require("../assets/img/2.jpg"),
          xnsqtitle: "标题：新农社区",
          xnsqcnt: "一张蓝图绘到底,撸起袖子加油干。",
        },
        {
          id: 3,
          url: require("../assets/img/3.jpg"),
          xnsqtitle: "标题：新农社区",
          xnsqcnt: "一张蓝图绘到底,撸起袖子加油干。",
        },
      ],
    };
  },
  created() {
    this.images.forEach(function(item) {
      var flags = item.flags;
      if (flags) {
        flags.forEach(function(item) {
          item.x = localStorage.getItem(item.id)
            ? localStorage.getItem(item.id).split(",")[0]
            : item.x;
          item.y = localStorage.getItem(item.id)
            ? localStorage.getItem(item.id).split(",")[1]
            : item.y;
        });
      }
    });


  },
  methods: {
    // 地图上的路口筛选框
    remoteMethod(query) {
      const that = this;
      if (query !== "") {
        that.loading = true;
        setTimeout(() => {
          that.loading = false;
          that.options = that.cameras.filter((item) => {
            return item.title.toLowerCase().indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        that.options = [];
      }
    },
    // 选择某个地图点位
    selectRoad(val) {
      const that = this;
      if (that.keyWords !== "") {
        that.$refs["carousels"].changeView([
          that.cameras[val].x,
          that.cameras[val].y,
        ]);
      }
    },
    showDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    showCoordinateDialog() {
      this.coordinateDialogVisible = true;
    },
    // 获取相对于浏览器窗口的坐标
    getMousePos(event) {
      this.coordinateDialogVisible = true;
      var e = event || window.event;
      this.x0 = e.clientX;
      this.y0 = e.clientY;
      console.log({
        x: e.clientX,
        y: e.clientY,
      });
    },
    // 滑块改变摄像头坐标
    changeInput() {
      //this.style1 = `left:${this.value1}px;top:${this.value2}px`;
    },
    // 点击确定按钮改变坐标
    changeCoordinate() {
      this.coordinateDialogVisible = false;
    },
    // 级联选择器发生改变时触发
    selectedKeysChange() {
      console.log(this.selectedKeys);
    },
    handleChange() {
      const that = this;
      that.showType = !that.showType;
      that.$refs.carousels.showMap = !that.$refs.carousels.showMap;
      if (that.showType) {
        that.$refs.carousels.flagClick(that.cameras);
      }
    },
    handleFullScreen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = !this.fullscreen;
    },
    handleVedio() {
      const that = this;
      that.open = true;
    },
    closeVedioDialog() {
      this.value = "";
      this.open = false;
    },
  },
};
</script>

<style scoped>
.app {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
}
.btn-vedio {
  position: fixed;
  top: 30px;
  right: 10px;
  z-index: 300;
  cursor: pointer;
  vertical-align: middle;
}
.btn-fullscreen {
  position: fixed;
  top: 25px;
  right: 170px;
  z-index: 300;
  cursor: pointer;
}
.change-btn {
  position: fixed;
  top: 25px;
  right: 215px;
  z-index: 300;
  cursor: pointer;
}
.right-panel {
  position: fixed;
  top: 28px;
  right: 255px;
  z-index: 300;
}

.btn-active {
  position: fixed;
  right: 10px;
}

.carousels {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.mp4 {
  width: 100%;
  height: 100%;
}

.bcg_img {
  width: 100%;
  height: 100%;
}

.second-img {
  width: 100%;
  height: 100%;
  /*margin-left:5%;*/
}

.coordinate {
  width: 100%;
  display: flex;
  align-items: center;
  font-size: 8px;
  margin-bottom: 10px;
}

.el-tag {
  font-size: 10px;
  text-align: center;
  margin: 0 5px 0 5px;
}

.coordinateDialog .el-dialog__header {
  margin: 0;
  padding: 0;
  text-align: center;
}

.coordinateDialog .el-dialog__title {
  font-size: 12px;
}

.coordinateDialog .el-dialog__body {
  padding: 10px;
  margin: 0;
}

.el-cascader {
  width: 100%;
  height: 40px;
  margin-top: 10px;
}

.el-cascader .el-input .el-input__inner {
  font-size: 9px;
}

.poppersize {
  width: 100px;
  font-size: 15px !important;
  color: white;
  border: none !important;
}

.poppersize .el-scrollbar__wrap {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.poppersize .el-cascader-menu__list {
  width: 100px;
}

.poppersize .el-cascader__dropdown {
  border: none !important;
}

.poppersize .el-cascader-node__label {
  text-overflow: initial !important;
}

.poppersize .el-cascader-node__label {
  font-size: 8px;
}

.block {
  position: fixed;
  z-index: 99;
  top: 200px;
  right: 120px;
}

.blocks {
  position: fixed;
  z-index: 99;
  top: 200px;
  right: 80px;
}

.img_top {
  display: flex;
  position: fixed;
  width: 100%;
  height: 80px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 10px black;
}

.title {
  height: 80px;
  line-height: 80px;
  font-size: 40px;
  font-weight: 400;
  color: white;
}

.title_img {
  height: 50px;
  margin-right: 20px;
}

.el-carousel__item.el-carousel__item--card.is-in-stage {
  text-align: center;
}

/*修改高度*/
.el-carousel__container {
  height: 100px;
}

.van-collapse-item__content {
  padding: 14px 0;
}

/*
    .flag {
      position: fixed;
      width: 100px;
      height: 50px;
      border: 1px;
      left: 546px;
      top: 461px;
      z-index: 99;
      .drag-item {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: deepskyblue;
        transform: scale(1);
      }

      .v-drag-active {
        transform: scale(1.2);
      }
      .v-drag-inactive {
        transform: scale(1);
      }
    } */

/* .flag {
      width: 200px;
      height: auto;
      position: fixed;
      float: left;
      padding: 0px;
      left: 546px;
      top: 461px;
      z-index: 99;
    }
    .v-drag-active {
      transform: scale(1);
    }
    .v-drag-inactive {
      transform: scale(1.2);
    }
    .flag-img {
      vertical-align: middle;
      width: auto;
      float: left;
    }
    .flag-txt {
      padding-left: 25px;
      height: 32px;
      line-height: 36px;
      color: white;
    } */
</style>
<style>
.search-input .el-input__inner {
  background-color: rgba(255, 255, 255, 0.4);
  border: 1px solid #000;
  color: #000;
  transition: all 0.5s linear;
}
.search-input .el-input__inner:hover {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #000;
  color: #000;
}
.search-input .el-input__inner:active {
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #000;
  color: #000;
}

.vedio-dialog .el-dialog__body {
  padding: 0px;
  margin-top: -30px;
}

.vedio-select {
  width: 160px;
}
.vedio-select .el-input__inner {
  background-color: transparent;
  //border: 1px solid #000;
  font-size: 1.2rem !important;
  border: 0;
  color: #fff;
  transition: all 0.5s linear;
}
.vedio-input .el-input__inner:hover {
  //background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #000;
  color: #000;
}
.vedio-input .el-input__inner:active {
  //background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #000;
  color: #000;
}
.vedio-input .el-select-dropdown__item.selected {
  color: #fff;
  text-align: center !important;
}
.vedio-input .el-select-placeholder {
  color: #fff;
  text-align: center !important;
}
</style>
